<template>
	<view class="add-address">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="addForm.consignee" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" maxlength="11" placeholder-class="line" placeholder="请填写收货人手机号" v-model="addForm.mobile" />
			</view>
			<view class="item selectAddress" @tap="showRegionPicker">
				<view class="left">选择所在地区</view>
				<input disabled type="text" placeholder-class="line" placeholder="请选择" v-model="region" />
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-17/20200817/850d67fbf350c89b485774eee0d5123c.png"
				 mode=""></image>
			</view>
			<view class="address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="填写道路、门牌号、小区等" v-model="addForm.address" />
				</view>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left set">设置默认地址</view>
				<view class="right"><u-checkbox @change="setDefault" v-model="checked" active-color="#131313"></u-checkbox></view>
	        </view>
		</view>
		  <!-- #ifdef MP-WEIXIN -->
		  <view class="import-address" @click="getWxAddress" v-if="type == 0">从微信导入地址</view>
		    <!-- #endif -->
		<view class="del-address" @click="delAddress" v-if="type == 1">删除</view>
		<view class="preserve" @click="submit">保存</view>
		<u-picker mode="region" ref="uPicker" v-model="show" @confirm="getAddress" :area-code='areaCode'/>
		<u-toast ref="uToast" />
		<!-- 打开小程序设置 -->
		<lw-goSetting ref="gosetting" :title="tips"></lw-goSetting>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	import provinces from '@/uview-ui/libs/util/province.js';
	import citys from '@/uview-ui/libs/util/city.js';
	import areas from '@/uview-ui/libs/util/area.js';
	export default {
		data() {
			return {
				tips:'需要访问您的通讯地址，请到小程序的设置中打开通讯地址授权',
				provinces: provinces,
				citys: citys,
				areas: areas,
				type:'',
				areaCode:[],
				region:'',
				addForm:{
					consignee:'',
					mobile: '',
					province_id:'',
					province:'',
					city_id: '',
					city: '',
					district_id: '',
					district:'',
					address:'',
					type: 1,
					default_id: 1,	
				},
				checked:false,
				show: false
			};
		},
		onLoad(option) {
			this.type = option.type
			if(this.type == 1) this.getData(option.id)
			console.log(provinces,citys,areas)
		},
		methods: {
	        getData(id) {
		        uni.setNavigationBarTitle({
		            title: '编辑收货地址'
		        });
		
				let data = {
					page: 0,
					limit: 50,
					address_id:id
				}
				this.$u.apiWei.addressList(data).then(res => {
					this.addForm = res.datas[0]
					if(this.addForm.default_id == 2){
						this.checked = true
					}else{
						this.checked = false
					}
					this.region = this.addForm.province + ' ' + this.addForm.city + ' ' + this.addForm.district
					this.areaCode.push(this.addForm.province_id)
					this.areaCode.push(this.addForm.city_id.substr(0, 4))
					this.areaCode.push(this.addForm.district_id)
				})
			},
			setDefault() {
				if(this.checked){
					this.addForm.default_id = 2
				}else{
					this.addForm.default_id = 1
				}
			},
			showRegionPicker() {
				this.show = true;
			},
			getWxAddress(){
				//#ifdef MP-WEIXIN
				uni.authorize({
				    scope: 'scope.address',
				    success:()=> {
				      uni.chooseAddress({
				        success:(res) =>{
						this.addForm.consignee = res.userName
						this.addForm.mobile = res.telNumber
						this.addForm.address = res.detailInfo
						
						this.addForm.province = res.provinceName
						this.addForm.city = res.cityName
						this.addForm.district = res.countyName
						this.region = this.addForm.province + ' ' + this.addForm.city + ' ' + this.addForm.district
				        
						this.provinces.forEach((item)=>{
							if(item.label == this.addForm.province) this.addForm.province_id = item.value
						})
						this.citys.forEach((item)=>{
								item.forEach((item2)=>{
									if(item2.label == this.addForm.city) this.addForm.city_id = item2.value
								})
							
						})
						this.areas.forEach((item)=>{
							item.forEach((item2)=>{
								item2.forEach((item3)=>{
									if(item3.label == this.addForm.district) this.addForm.district_id = item3.value
								})
							})
						})
						
						this.areaCode.push(this.addForm.province_id)
						this.areaCode.push(this.addForm.city_id)
						this.areaCode.push(this.addForm.district_id)
						this.addForm.city_id = this.addForm.city_id + '00'
						}
				      })  
				    },
					fail:(err)=> {
					this.$refs.gosetting.open()	
					}
				})
				//#endif	
			},
			getAddress(e){
				this.region = e.province.label + ' ' + e.city.label + ' ' + e.area.label
				this.addForm.province_id = e.province.value
				this.addForm.city_id = e.city.value + '00'
				this.addForm.district_id = e.area.value
				
				this.addForm.province = e.province.label
				this.addForm.city = e.city.label
				this.addForm.district = e.area.label
			},
			// 删除地址
			delAddress(){
				let data = {
					address_id:	this.addForm.address_id
				}
				uni.showModal({
				    title: '提示',
				    content: '确定删除该收货地址吗？',
				    success:  (res) =>{
				        if (res.confirm) {
				            this.$u.apiWei.AddressDelete(data).then(res => {
				            	uni.showToast({
				            	    title: res.datas,
				            	    duration: 1000,
				            		icon:'none',
				            	});
				            	setTimeout(()=>{
				            		uni.navigateBack()
				            	},1000)
				            })
				        } else if (res.cancel) {
				            
				        }
				    }
				});
			},
			submit(){
				if(this.addForm.consignee == ''){
					this.$refs.uToast.show({
						title: '请填写收货人',
					})
					return
				}else if (this.addForm.mobile == "" || !this.$u.test.mobile(this.addForm.mobile)){
					this.$refs.uToast.show({
						title: '请输入正确的手机号码',
					})
					return
				}else if (this.addForm.province == ''){
					this.$refs.uToast.show({
						title: '请选择省市区',
					})
					return
				}else if (this.addForm.address == ''){
					this.$refs.uToast.show({
						title: '请填写详细地址',
					})
					return
				}
				if(this.type == 0){
					this.$u.apiWei.AddressAdd(this.addForm).then(res => {
						this.$refs.uToast.show({
							title: '添加成功',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					})
				}else if(this.type == 1){
					this.$u.apiWei.AddressUpdate(this.addForm).then(res => {
						this.$refs.uToast.show({
							title: '编辑成功',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.add-address {
		.line{
			font-size:32rpx;
			text-align: right;
			color:#9F9F9B;
		}
		.top {
			background-color: #ffffff;
			padding: 30rpx 30rpx 0 30rpx;
			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 150rpx;
				align-items: center;
				border-bottom: solid 2rpx #F4F4F4;
				.left {
					width: 200rpx;
					color: #434343;
					font-size: 32rpx;
				}
				input {
					flex: 1;
					text-align: right;
				}
			}
			
			.address {
				display: flex;
				border-bottom: solid 2rpx #F4F4F4;
				.left{
					margin-top: 60rpx;
					width: 200rpx;
					color: #434343;
					font-size: 16px;
				}
				textarea {
					margin: 0 auto;
					margin-top: 30rpx;
					height: 150rpx;
					line-height: 60rpx;
					padding: 20rpx 60rpx;
				}
			}
		}
		.bottom {
			padding:0 30rpx;
			background-color: #ffffff;
			font-size: 32rpx;
			.default {
				display: flex;
				height: 150rpx;
				line-height: 150rpx;
				.set{
					flex: 1;
				}
				.right{
					width: 34rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.import-address{
			margin-top: 60rpx;
			width:100%;
			line-height:90rpx;
			background:#F9F9F9;
			font-weight:500;
			text-align: center;
			font-size:32rpx;
			color:#131313;
		}
		.del-address{
			margin-top: 60rpx;
			width:100%;
			line-height:90rpx;
			background:#F9F9F9;
			font-weight:500;
			text-align: center;
			font-size:32rpx;
			color:#F5935A;
		}
		.preserve{
			margin: 0 auto;
			margin-top: 80rpx;
			width:600rpx;
			line-height:90rpx;
			font-size:32rpx;
			font-weight:500;
			color:#fff;
			text-align: center;
			background:#131313;
			border-radius:8rpx;
		}
		.selectAddress image{
			display: block;
			margin-left: 20rpx;
			width:30rpx;
			height:36rpx;
		}
		.authorize-tip{
			padding: 60rpx 70rpx 20rpx 70rpx;
		}
		.authorize-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			button{
				background-color: #141414;
				color: #fff;
			}
		}
	}
</style>
